<!DOCTYPE html>
<html lang="zh-cn">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
		<style>

		</style>
		<script src="./src/vue.js"></script>
	</head>

	<body>

		<div id="app">
			<button @click="fn1">测试事件</button>
			<a @click="prevent" href="http://www.miaov.com">miaov</a>
			<a @click.prevent="prevent2" href="http://www.miaov.com">miaov</a>

			<div @click.capture="demo1">
				demo1
				<div @click.self="demo2">
					demo2
					<div @click.stop.once="demo3">demo3</div>

				</div>

			</div>


			<input type="text" @keyup.enter="uphandle" >


		</div>

		<script>
            /**
			 * 事件修饰符
			 * 	方法只有纯粹的数据逻辑,而不是去处理 DOM 事件细节.
			 * 	语法: v-on : 事件名.修饰符="事件处理函数" (修饰符可以写多个)
			 * 	.stop(阻止冒泡) .prevent(取消事件默认行为) .capture(捕获) .self(只触发自己) .once(只触发一次)  捕获和冒泡在事件流中是相反的流程
			 * 	按键修饰符: .enter .tdb .delete .esc .space .up .down .left .right (直接 '.键值' 也可以)
             */


                var vm = new Vue({
                    el:'#app',
                    data:{
                        message:'hello vue!'

                    },
                    methods:{
						fn1(){
							alert(1)
						},
						prevent(ev){
						    ev.preventDefault(); //取消事件默认行为
						},
						prevent2(){

                        },
						demo1(){
						    console.log("demo1")
						},
						demo2(){
						    console.log("demo2")
						},
						demo3(){
						    console.log("demo3")
						},
                        uphandle(){
						    console.log("123")
						}
                    }

                });



		</script>

	</body>
</html>